<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
<!--  <link rel="stylesheet" href="stylesheets/reset.css">-->
  <link rel="stylesheet" href="stylesheets/index.css">
  <style>
    .weight {
      font-weight: bold;
      font-style: italic;
    }

    .text-danger {
      color: red;
    }
    .active {
      background-color: blue;
    }

    .box {
      height: 400px;
      width: 400px;
      border: 2px solid cadetblue;
    }

    .sub-box {
      height: 200px;
      width: 200px;
      margin: 100px auto;
      background-color: cadetblue;
      text-align: center;
      line-height: 200px;
      font-size: 50px;
    }
  </style>
</head>
<body>

<div id="app">
  <h1>{{ counter }}</h1>
  <h1>{{ counter10 }}</h1>
  <div class="box" @click.once="counterAdd(2, 'hello', $event, [99, 0], {name: '张三'})">
<!--    <div class="sub-box" @click="handleSubBox($event)">-->
    <div class="sub-box" @click.stop="handleSubBox($event)">
<!--      <a href="https://www.baidu.com/" @click="handleLink">baidu</a>-->
<!--      <a href="https://www.baidu.com/" @click.prevent="handleLink">baidu</a>-->
      <a href="https://www.baidu.com/" @click.prevent.stop="handleLink">baidu</a>
    </div>
  </div>
<!--  <input type="text" v-model="val" @keydown="uname">-->
<!--  <input type="text" v-model="val" @keydown.enter="uname">-->
  <input type="text" v-model="val" @keydown.13.shift="uname">
<!--  <div class="box" @click="counterAdd"></div>-->
<!--  <div class="box" v-on:click="console.log(123)"></div>-->
</div>


<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
